﻿
<template>
  <div class="Detail_Excahnge_contain" ref="Detail_Excahnge_contain">
    <div class="Detail_header">
      官方兑换
      <!--<div class="Detail_goBack" v-on:click="hide_detail">
        <img src="../../static/img/goback_detail.png">
      </div>-->
    </div>
    <div class="top_nav_Scroll">
      <Detail img="list_d.images" :childMsg="img_list_test"></Detail>
    </div>
    <div class="div_middle clearfix">
      <div class="div_middle_left">
        积分 <span>{{list_d.integral}}</span>
      </div>
      <img src="../../static/img/nav_fenhao.png" alt="Alternate Text" class="fenhao_img" v-on:click="show_alert"/>
      <div class="div_middle_right">需赞数 {{list_d.maxPoint}}</div>
    </div>
    <div class="wrap_iscroll_view">
      <scroller class="clearfix">
        <div class="inner_story_bottom_title">{{list_d.postName}}</div>
        <div class="inner_story_list" v-html="list_d.postContent">
          <!--<p>诗经123456</p>
          <p>
            诗经》是中国古代诗歌开端
          </p>
          <p> 最早的一部诗歌总集。</p>
          <p> 诗经收集了西周初年至春秋中叶</p>
          <p>（前11世纪至前6世纪）的诗歌，</p>
          <p>共311篇，其中6篇为笙诗，即只有标题，</p>
          <p>没有内容，称为笙诗六篇</p>
          <p>诗经收集了西周初年至春秋中叶</p>
          <p>（前11世纪至前6世纪）的诗歌，</p>
          <p>共311篇，其中6篇为笙诗，即只有标题，</p>
          <p>没有内容，称为笙诗六篇.</p>
          <p> 诗经收集了西周初年至春秋中叶</p>
          <p>（前11世纪至前6世纪）的诗歌，</p>
          <p>共311篇，其中6篇为笙诗，即只有标题，</p>
          <p>没有内容，称为笙诗六篇</p>
          <p>诗经收集了西周初年至春秋中叶</p>
          <p>（前11世纪至前6世纪）的诗歌，</p>
          <p>共311篇，其中6篇为笙诗，即只有标题，</p>
          <p>没有内容，称为笙诗六篇.</p>
          <p class="bottom_10">&nbsp;</p>
          <p class="bottom_10">&nbsp;</p>-->
        </div>
  </scroller>
  </div>
  <div class="Detail_bottom">
    <!-- 点赞 s -->
    <div class="d_b_f pad_l_5" >
      <img v-bind:src="dz_src" class="my_exchange_good " v-on:click="dianz">
      <span class="num_b"> {{list_d.nowPoint}}</span>
    </div>
    <!-- 点赞 e -->
    <!--<div class="d_b_f " style="opacity:0">
      <img src="../../static/img/my_gift_tale.png" class="my_exchange_good">
      <span class="num_b"> 689</span>
    </div>-->
    <!-- 分享 s -->
    <div class="d_b_f">
      <img src="../../static/img/my_gift_last.png" class="my_exchange_good" v-on:click="share_show" >
      <span class="num_b"> {{list_d.shareTimes}}</span>
    </div>
    <!-- 分享 e-->
    <div class="certain_btn_d" v-on:click="show_mask">
      兑换
    </div>
  </div>
   <div class="show_box_mask" v-show="mask_show" v-on:click.self="mask_hide">
     <div class="show_box">
        <div class="show_box_header">
          <p>我的积分：{{user_msg.integral}}</p>
          <!--<p class="cz_btn">充值</p>-->
        </div>
        <div class="show_box_main">
          <p class="show_box_main_title">
            兑换数量
          </p>
          <div class="wrap_count">
            <div class="count_p" v-on:click="plus">+</div>
            <div class="count_show">{{count}}</div>
            <div class="count_r" v-on:click="reduce">-</div>
          </div>
        </div>
        <div class="show_box_bottom">
          <p class="need_fen">所需积分{{need_count}}</p>
          <p class="certain_btn_show_box" v-on:click="certain_btn_mess">确认</p>
        </div>
     </div>
   </div>
    <!-- share mask s -->
    <div class="share_mask" v-show="share_mask_show" v-on:click="share_close">
      <div class="share_w">
        点击分享哦<br/>
        (｡・`ω´･)
      </div>
      <div class="wrap_arrow_share">
        <div class="arrow_share"></div>
        <div id="triangle-up"></div>
      </div>
    </div>
    <!-- share mask e -->
  </div>
</template>

<script>
  import {mapState, mapMutations,mapActions,mapGetters} from 'vuex';
  //limit_Scroll
  import limit_scroll from "../../static/js/limit_scroll.js"
  import Detail from "./scroll_view/Detail_nav.vue"
  import { Toast, Indicator, MessageBox } from 'mint-ui';
  import qs from 'qs';
export default {
  name: 'Detail_Exchange',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      show_layer:false,
      get_layer_show: this.$store.getters.get_layer_show,
      list_d: "",
      count: 0,
      need_count: 0,
      mask_show: false,
      content_wenh: "",
      img_list: {
        list:[]
      },
      img_list_test: {
        list:[1,1,1]
      },
      PostId: "",
      user_msg: "",
      hide_up: false,
      share_mask_show: false,
      dz_src: "http://wx.yizhiweimeng.com/static/static/img/my_exchange_good.png"
    }
  },
  beforeCreate: function () {
    Indicator.open();
    let ajax_list;
    //let user_id = sessionStorage.getItem("user_id")

    //let id = sessionStorage.getItem("off_post_id");
    //[0]是用户id [1]是 商品id
    let all_id = location.search.replace("?all_id=", '').split("@@")
   // let user_id = all_id[0]
    let id = all_id[1]
    this.PostId = id
    this.$http.all(
      [
        this.$http.get('/api/user/tokenExchange/getOfficialpostById?id=' + all_id[1]),
        this.$http.get('/api/user/getUserById?id=' + all_id[0])
      ]
    )
    .then(this.$http.spread((offical, user_msg) => {
        // 上面两个请求都完成后，才执行这个回调方法
        Indicator.close();
        if (user_msg.data== null || user_msg.data == "") {
          this.hide_up = true;
        } else {
          this.user_msg = user_msg.data
        }
        this.list_d = offical.data;
    }))
      .catch((thrown) => {
      console.log(thrown)
      Indicator.close();
        Toast({
          message: '网络出错',
          position: 'bottom',
          duration: 2000
        });
      })
  },
  mounted: function () {
    //微信分享配置
    //获取当前 url
    let url = location.href;
    url = url.split("#")[0]
    Indicator.open();
    //获取分享配置
    this.$http.post('/api/wxUtil/getSign',
      qs.stringify(
        {
          "url": url
        })
    )
    .then((e) => {
        // 上面两个请求都完成后，才执行这个回调方法
        Indicator.close();
        let data = e.data
        let link = location.href;
        let post_name = this.list_d.postName
        let img = this.list_d.images
        wx.config({
          debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
          appId: data.appId, // 必填，企业号的唯一标识，此处填写企业号corpid
          timestamp: data.timestamp, // 必填，生成签名的时间戳
          nonceStr: data.nonceStr, // 必填，生成签名的随机串
          signature: data.signature,// 必填，签名，见附录1
          jsApiList: ["onMenuShareTimeline"] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
        });
        wx.onMenuShareTimeline({
          title: post_name, // 分享标题
          link: link, // 分享链接，该链接域名必须与当前企业的可信域名一致
          imgUrl: img, // 分享图标
          success: function () {
            // 用户确认分享后执行的回调函数
            console.log("success++++++++")
            //api / user / tokenExchange / addShareTimes
            this.$http.post('/api/user/tokenExchange/addShareTimes',
              qs.stringify(
                {
                  'officialId': sessionStorage.getItem("off_post_id"),
                })
               )
              .catch(() => {
                Toast({
                  message: "网络出错",
                  position: 'bottom',
                  duration: 2000
                });
              })
              .then((e) => {
                // 上面两个请求都完成后，才执行这个回调方法
                Indicator.close();
                //if(e.data == )
                if (e.data == "分享成功") {
                  this.list_d.shareTimes = this.list_d.shareTimes + 1;
                }
                Toast({
                  message:e.data,
                  position: 'bottom',
                  duration: 2000
                });
              })
          },
          cancel: function () {
          
            // 用户取消分享后执行的回调函数
          }
        });
    })
      .catch((e) => {
        
        Toast({
          message: "网络出222错",
          position: 'bottom',
          duration: 2000
        });
      })
  },
  methods: {
    //分享show
    share_show: function () {
      this.share_mask_show = true
    },
    //分享close
    share_close: function () {
      this.share_mask_show = false
    },
    dianz: function () {
      //[0]是用户id [1]是 商品id
      let all_id = location.search.replace("?all_id=",'').split("@@")
      let user_id = all_id[0]
      let pid = add_id[1];
      Indicator.open();
      this.$http.post('/api/user/tokenExchange/GiveThethumbsUp',
        qs.stringify(
          {
            'Uid': user_id,
            'Pid': pid ,
          })
       )
       .then((e) => {
          // 上面两个请求都完成后，才执行这个回调方法
         Indicator.close();
        //if(e.data == )
         if (e.data == '点赞成功！') {
           this.dz_src = "http://wx.yizhiweimeng.com/static/static/img/al_click_dz.png"
           this.list_d.nowPoint = this.list_d.nowPoint + 1;
         } else {
           this.dz_src = "http://wx.yizhiweimeng.com/static/static/img/my_exchange_good.png"
           this.list_d.nowPoint = this.list_d.nowPoint - 1;
         }
         this.mask_show = false;
          Toast({
            message: e.data,
            position: 'bottom',
            duration: 2000
          });
        }).catch(() => {
          Toast({
            message: "网络出错",
            position: 'bottom',
            duration: 2000
          });
        })
    },
    certain_btn_mess: function () {
      let user_id = sessionStorage.getItem("user_id");
      if (this.count == 0) {
        Toast({
          message: '兑换数量为0',
          position: 'bottom',
          duration: 2000
        });
        return;
      } else if (user_id=="") {
        Toast({
          message: '用户id为空',
          position: 'bottom',
          duration: 2000
        });
        return;
      }
      Indicator.open();
      this.$http.post('/api/user/tokenExchange/exchangePost',
        qs.stringify(
          {
            'user.id': user_id,
            'officialpost.id': sessionStorage.getItem("off_post_id"),
            quantity: this.count
          })
       )
        .then((e) => {
        console.log(e.data)
          // 上面两个请求都完成后，才执行这个回调方法
        Indicator.close();
        
          Toast({
            message: e,
            position: 'bottom',
            duration: 2000
          });
        })
    },
    show_alert: function () {
      MessageBox.alert(this.list_d.condition, '提示');
    },
    plus: function () {
      this.count += 1;
      this.need_count = this.list_d.integral * this.count;
    },
    reduce: function () {
      if (this.count == 0) return;
      this.count -= 1;
      this.need_count = this.list_d.integral * this.count;
    },
    hide_detail: function () {
      window.removeEventListener('popstate', function () {
        history.pushState(null, null, document.URL);
      });
      this.$emit('hide_detail')
    },
    show_mask: function () {
      this.mask_show = true
    },
    mask_hide: function () {
      this.mask_show = false;
    }
  },
  components: {
    Detail
  }
}
</script>

<style scoped>
  /*点赞s*/
  .dianzan_act {
    background-image: url("../../static/img/al_click_dz.png");
  }
  /*点赞e*/
  /*share mask s*/
  .wrap_arrow_share{
    position:relative;
  }
  #triangle-up {
    width: 0;
    height: 0;
    border-left: 1rem solid transparent;
    border-right: 1rem solid transparent;
    border-bottom: 1rem solid #ffbc85;
    position: absolute;
    right: 9%;
    top: 0.9rem;
    transform: rotate(30deg)
  }
  .arrow_share {
    width: 1rem;
    height: 6rem;
    background-color: #ffbc85;
    position: absolute;
    top: 1rem;
    right: 20%;
    transform: rotate(30deg);
  } 
  .share_w {
    font-size: 1.5rem;
    text-align: center;
    top: 33%;
    left: 50%;
    transform: translate(-50%,-50%);
    position: absolute;
    color: #fff;
  } 
  .share_mask {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    line-height:1.2;
    background-color: rgba(0,0,0,0.7);
    z-index: 1000;
  }
  /*share mask e*/
  .show_box_bottom {
    font-size: 0.8rem;
    display: flex;
    justify-content: space-between;
    margin-top: 0.9rem;
  }
  .certain_btn_show_box {
    padding: 0.35rem 6vw;
    margin-right: 5%;
    background-color: #e54d4c;
    text-align:center;
    color:#fff;
    font-size:0.7rem;
    border-radius:1vw;
    margin-top:-0.2em;
  } 
  .need_fen {
    color: #c97b3d;
    margin-left: 5%;
  }
  .show_box_main {
    border-bottom: 1px solid #d5d5d5;
    padding-bottom: 1.95rem;
  } 
  .wrap_count div {
    text-align: center;
    height: 1.5rem;
    line-height: 1.5rem;
  }
  .wrap_count div:nth-child(1) {
    border-right: 2px solid #c36b2b;
    width:6vw;
  }
  .wrap_count div:nth-child(3) {
    width: 6vw;
    border-left: 2px solid #c36b2b;
  }
  .wrap_count div:nth-child(2) {
    width: 16vw;
   
  } 
  .wrap_count {
    border-radius:1vw;
    width: 30vw;
    border: 2px solid #c36b2b;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
  } 
  .show_box_main_title {
    color: #c57337;
    font-size: 0.8rem;
    margin-top: 0.75rem;
    margin-bottom: 1.2rem;
    font-weight: 600;
  } 
  .show_box_header {
    height: 1.85rem;
    line-height: 1.85rem;
    background-color: #f38001;
    font-size: 1rem;
    color: #fff;
    border-radius: 2vw 2vw 0 0;
  } 
  .cz_btn {
    float:right;
    margin-right:5%;
    height:1rem;
    line-height:1rem;
    text-align:center;
    padding:0 2%;
    border:1px solid #fff
  } 
  .show_box_mask {
    height: 100%;
    width: 100%;
    background-color: rgba(0,0,0,0.6);
    position: absolute;
    top: 0;
    left: 0;
    z-index:1000;
  }
  .show_box {
    margin: 3.75rem auto 0;
    width: 88%;
    height: 10.85rem;
    background-color: #fff;
    border-radius: 2vw;
    z-index: 999;
  }
  .pad_l_5 {
    padding-left: 5%;
  }
  .certain_btn_d {
    text-align:center;
    line-height:2.6;
    color:#fff;
    width: 35%;
    height: 100%;
    background-color: #e54d4c;
  } 
  .num_b {
    vertical-align: bottom;
    line-height: 1;
    margin-top: 0.3rem;
  }
  .d_b_f {
    margin-top: 0.67rem;
    width: 13.3%;
    font-size: 0.7rem;
    color: #b4b4b4;
    display: flex;
    justify-content: space-between
  } 
  .my_exchange_good {
    width: 5.7vw;
    display: block;
    height: 1rem;
  } 
  .Detail_bottom {
    display: flex;
    justify-content: space-between;
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: #fff;
  }
  .scroll-view {
    /* -- Attention: This line is extremely important in chrome 55+! -- */
    touch-action: none;
    /* -- Attention-- */
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: hidden;
  }
  .wrap_iscroll_view {

    position: relative;
    height: 14rem;
  } 
  .bottom_10 {
    margin-bottom: 0.75rem;
  } 
  .Detail_bottom {
    height: 2.5rem;
    box-shadow: 0 -2px 8px 1px rgba(128, 128, 128, 0.13);
  }
  .fade-enter-active, .fade-leave-active {
    transition: opacity .5s
  }

  .fade-enter, .fade-leave-to /* .fade-leave-active in below version 2.1.8 */ {
    opacity: 0
  }
  /*story_bottom_title*/
  .inner_story_bottom_title {
    width: 30%;
    margin: 0 auto;
    margin-top: 0.7rem;
    margin-bottom: 0.9rem;
    position: relative;
    color: #9f5c2f;
    font-size:1rem;
  }
  .inner_story_bottom_title:after {
    content: " ";
    display: block;
    width: 0.3rem;
    height: 0.3rem;
    border-radius: 50%;
    background-color: #9f5c2f;
    position: absolute;
    top: 50%;
    left: 0%;
    transform:translateY(-50%)
  }
  .inner_story_bottom_title:before {
    content: " ";
    display: block;
    width: 0.3rem;
    height: 0.3rem;
    border-radius: 50%;
    background-color: #9f5c2f;
    position: absolute;
    top: 50%;
    right:0%;
    transform: translateY(-50%)
  }
  /*scroll s*/
  body {
    /* On modern browsers, prevent the whole page to bounce */
    overflow: hidden;
  }

  #wrapper2 {
    position: relative;
    width: 100%;
    height: 12rem;
    overflow: hidden;
    /* Prevent native touch events on Windows */
    -ms-touch-action: none;
    /* Prevent the callout on tap-hold and text selection */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    /* Prevent text resize on orientation change, useful for web-apps */
    -webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    -ms-text-size-adjust: none;
    -o-text-size-adjust: none;
    text-size-adjust: none;
  }
  .inner_story_list {
    font-size: 0.7rem;
    color: #b16a3b;
    line-height:2;
  }
  #scroller2 {
    width: 100%;
    position: absolute;
    /* Prevent elements to be highlighted on tap */
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    /* Put the scroller into the HW Compositing layer right from the start */
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
  }
  /*certain btn e*/
  /*scroll e*/

  /*contaienr s*/
  .Detail_Excahnge_contain {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    background-color: #fff;
  }
  /*container e*/

  /*Detail_header s*/
  .Detail_header {
    height: 1.75rem;
    line-height: 2.4;
    background-color: #fff;
    text-align: center;
    color: #9f5c2f;
    font-size: 0.8rem;
    font-weight: 600;
    position: relative;
    box-shadow: 0 2px 6px 2px #c7c2c2;
  }

  .Detail_goBack {
    width: 5.5%;
    position: absolute;
    left: 3%;
    top: 0.4rem;
  }

    .Detail_goBack img {
      width: 100%;
      display: block;
    }

  .top_nav_Scroll {
    width: 100%;
  }

  .div_middle {
    height: 1.75rem;
    line-height: 2.6;
    font-size: 0.75rem;
    color: #9f5c2f;
    background-color: #fff;
    box-shadow: 0 2px 8px 2px rgba(128, 128, 128, 0.51);
  }

  .div_middle_left {
    float: left;
    padding-left: 5%;
  }

  .div_middle_right {
    float: right;
  }

  .fenhao_img {
    float: right;
    width: 6.4%;
    margin-top: 0.2rem;
    margin-right: 4%;
    margin-left: 4%;
  }

  .story_bottom {
    height: 12rem;
    margin-top: 0.2rem;
    overflow:scroll;
  }

  .story_title {
    height: 3rem;
  }
  /*Detail_header e*/

</style>